<template>
  <section>
    <el-row>
      <el-tabs v-model="stockPage" @tab-click="selStockPage">
        <el-tab-pane label="入库类型" name="stockIn">
          <el-row>
            <el-button @click="newStockInType" size="mini" type="primary">新建入库类型</el-button>
          </el-row>
          <el-row>
            <el-table :data='stockInTypes' v-if="stockInTypes">
              <el-table-column type="index"></el-table-column>
              <el-table-column label="类型名称">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.name"></el-input>
                  <div v-show="!scope.row.edit">{{scope.row.name}}</div>
                </template>
              </el-table-column>
              <el-table-column label="类型编码">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.code"></el-input>
                  <div v-show="!scope.row.edit">{{scope.row.code}}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="155">
                <template slot-scope="scope">
                  <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope)' size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
                  <el-button @click='del(scope)' size="mini" >{{scope.row.edit?'取消':'删除'}}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="出库类型" name="stockOut">出库类型</el-tab-pane>
        <el-tab-pane label="仓库类型" name="stockManagement">
          <el-row>
            <el-button @click="newWarehouse" size="mini" type="primary">新建仓库</el-button>
          </el-row>
          <el-row>
            <el-table :data='warehouseList' v-if="warehouseList">
              <el-table-column type="index"></el-table-column>
              <el-table-column label="仓库名称">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.name"></el-input>
                  <div v-show="!scope.row.edit">{{scope.row.name}}</div>
                </template>
              </el-table-column>
              <el-table-column label="仓库编码">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.code"></el-input>
                  <div v-show="!scope.row.edit">{{scope.row.code}}</div>
                </template>
              </el-table-column>
              <el-table-column label="地址">
                <template slot-scope="scope">
                  <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.location"></el-input>
                  <div v-show="!scope.row.edit">{{scope.row.location}}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="155">
                <template slot-scope="scope">
                  <el-button :type="scope.row.edit?'success':'primary'" @click='confirmWarehouse(scope)' size="mini" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
                  <el-button @click='delWarehouse(scope)' size="mini" :type="scope.row.edit?'':'danger'">{{scope.row.edit?'取消':'删除'}}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </section>
</template>

<script>
  import DateFormat from '@/common/date-formater'
  import schedule from "../../sdk/api/schedule"
  import department from "../../sdk/api/department"
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "stockType",
    data() {
      return {
        stockPage:'stockIn',
        stockInTypes:null,
        stockOutTypes:null,
        warehouseList:null
      }
    },
    created(){
      //加载出入库类型表
      this.getStockInTypes()
      this.getStockOutTypes()
    },
    watch:{
      stockPage(nv,ov){
        if(nv === 'stockManagement'){
          //加载现有仓库
          this.getWarehouseList()
        }
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getWarehouseList(){
        this.fetch({name:"getWarehouseList"})
          .then(res=>{
            console.log(res)
            this.warehouseList = res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      newWarehouse(){
        let tmp = {edit:true}
        if(this.warehouseList){
          this.warehouseList.push(tmp)
        }else {
          this.warehouseList=[]
          this.warehouseList.push(tmp)
        }
      },
      selStockPage(tab, event){
        console.log(tab)
        console.log(event)
      },
      getStockInTypes(){
        this.fetch({name:"getStockInTypes"})
          .then(res=>{
            console.log(res)
            this.stockInTypes=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getStockOutTypes(){
        this.fetch({name:"getStockOutTypes"})
          .then(res=>{
            this.stockOutTypes=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      newStockInType(){
        let newStockInType = {name:'',code:'',edit:true}
        this.stockInTypes.push(newStockInType)
      },
      cancel(scope){
        scope.row.edit=false
      },
      confirm(scope){
        console.log(scope)
        if(scope.row.edit && scope.row.edit === true){
          let data={name:scope.row.name,code:scope.row.code}
          //判断是否新创建
          if(scope.row.id){//非新建，有id，要更新
            data.id = scope.row.id
            this.updateStockInType(data)
          }
          else {//新建的，有edit
            //保存新
            console.log(data)
            this.createStockInType(data)
          }
        }else {
          //点击之前是非编辑状态，改成编辑状态
          if(scope.row.edit === undefined){
            Vue.set(scope.row,'edit',true)//后续添加属性，需要vue联动
          }else {
            scope.row.edit = true
          }
        }
      },
      createStockInType(data){
        console.log(data)
        this.fetch({name:"createStockInType",data:data})
          .then(res=>{
            this.getStockInTypes()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateStockInType(data){
        console.log(data)
        this.fetch({name:"updateStockInType",data:data})
          .then(res=>{
            this.getStockInTypes()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      del(scope){//删除or取消
        console.log(scope)
        if(scope.row.edit){//如果是true，就是取消
          if(scope.row.id){
            scope.row.edit = false
          }else {
            this.stockInTypes.splice(scope.$index,1)
          }
        }else {//如果是false，就是删除
          if(scope.row.id){
            this.fetch({name:"deleteStockInType",data:{id:scope.row.id}})
              .then(res=>{
                this.stockInTypes.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          }else {
            console.log('没有id号')
          }
        }
      },
      confirmWarehouse(scope){
        console.log(scope)
        if(scope.row.edit && scope.row.edit === true){
          let data={name:scope.row.name,code:scope.row.code}
          //判断是否新创建
          if(scope.row.id){//非新建，有id，要更新
            data.id = scope.row.id
            this.updateWarehouse(scope.row,data)
          }
          else {//新建的，有edit
            this.createWarehouse(scope.row,data)
          }
        }else {
          //点击之前是非编辑状态，改成编辑状态
          if(scope.row.edit === undefined){
            Vue.set(scope.row,'edit',true)//后续添加属性，需要vue联动
          }else {
            scope.row.edit = true
          }
        }
      },
      createWarehouse(row,data){
        console.log(data)
        this.fetch({name:"createWarehouse",data:data})
          .then(res=>{
            row.edit = !row.edit
            this.getWarehouseList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateWarehouse(row,data){
        console.log(data)
        this.fetch({name:"updateWarehouse",data:data})
          .then(res=>{
            row.edit = !row.edit
            this.getWarehouseList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      delWarehouse(scope){//删除or取消
        console.log(scope)
        if(scope.row.edit){//如果是true，就是取消
          if(scope.row.id){
            scope.row.edit = false
          }else {
            this.warehouseList.splice(scope.$index,1)
          }
        }else {//如果是false，就是删除
          if(scope.row.id){
            this.fetch({name:"deleteWarehouse",data:{id:scope.row.id}})
              .then(res=>{
                this.warehouseList.splice(scope.$index,1)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          }else {
            console.log('没有id号')
          }
        }
      },
    }
  }
</script>

<style scoped>

</style>
